<!-- 多选框 -->
<template>
	<view class="vk-data-input-checkbox">
		<!-- 页面开始 -->
		<u-checkbox-group :wrap="wrap" :width="width" :size="size" :active-color="activeColor" :iconSize="iconSize" :shape="shape" :disabled="disabled" :max="max">
			<u-checkbox v-for="(item, index) in localdata" :key="index" :value="_itemChecked(item[props.value])" :modelValue="_itemChecked(item[props.value])" :name="item[props.value]"
				:disabled="item.disabled" @input="onItemInput(item[props.value])">
				{{ item[props.label] }}
			</u-checkbox>
		</u-checkbox-group>
		<!-- 页面结束 -->
	</view>
</template>
<script>
	export default {
		name: "vk-data-input-checkbox",
		emits: ["update:modelValue", "input", "change"],
		props: {
			// 表单值
			value: {},
			modelValue: {},
			// 数据源
			localdata: {
				type: Array,
				default () {
					return [];
				}
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			wrap: {
				type: Boolean,
				default: false
			},
			width: {
				type: [String, Number],
				default: "auto"
			},
			size: {
				type: [String, Number],
				default: 34
			},
			activeColor: {
				type: String,
				default: "#2979ff"
			},
			iconSize: {
				type: [String, Number],
				default: 20
			},
			shape: {
				type: String,
				default: "square"
			},
			max: {
				type: Number,
				default: 9999
			},
			props: {
				type: Object,
				default () {
					return {
						value: 'value',
						label: 'label'
					};
				}
			}
		},
		data: function() {
			// 组件创建时，进行数据初始化
			return {

			};
		},
		mounted() {
			this.init();
		},
		methods: {
			// 初始化
			init() {

			},
			// 向父组件发送更新value事件
			_updateValue(value) {
				this.$emit("input", value);
				this.$emit("update:modelValue", value);
				this.$emit("change", value);
			},
			onItemInput(itemValue) {
				let { valueCom = [] } = this;
				let value = JSON.parse(JSON.stringify(valueCom));
				let index = value.indexOf(itemValue);
				if (index > -1) {
					value.splice(index, 1);
				} else {
					value.push(itemValue);
				}
				this._updateValue(value);
			},
			_itemChecked(itemValue) {
				let key = false;
				let { valueCom: value } = this;
				if (value && value.indexOf(itemValue) > -1) {
					key = true;
				}
				return key;
			}
		},
		// 计算属性
		computed: {
			valueCom() {
				// #ifdef VUE2
				return this.value;
				// #endif

				// #ifdef VUE3
				return this.modelValue;
				// #endif
			}
		}
	};
</script>

<style lang="scss" scoped>

</style>